<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-main>
      <el-scrollbar>
        <el-table :data="tableData">
          <el-table-column prop="id" label="店铺编号" width="100"/>
          <el-table-column prop="name" label="店铺" width="150"/>
          <el-table-column prop="securityFund" label="保障金" width="100"/>
          <!-- <el-table-column prop="score" label="评分"> -->
          <el-table-column label="评分" width="200">
            <template #default="scope">
              <el-rate v-model="scope.row.score" disabled show-score text-color="#ff9900">
                {{ scope.row.score }} 分
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="toCommodityVue(scope.row.id)">
                店铺商品
              </el-button>
              <el-button @click="toOrderVue(scope.row.id)">
                店铺订单
              </el-button>
              <el-button @click="toEvaluateVue(scope.row.id)">
                店铺评价
              </el-button>
              <el-button @click="toCouponVue(scope.row.id)">
                店铺优惠卷
              </el-button>
              <el-button @click="openShopEditDialog(scope.row.id)">
                编辑
              </el-button>
              <el-button @click="openShopDeleteDialog(scope.row.id)">
                注销
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
  </el-container>
  <shop-delete ref="shopDRef" />
  <shop-edit ref="shopURef"/>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { getShopByJwt } from "../../api/shop/"
import { ElContainer } from 'element-plus';
import { useRouter } from 'vue-router'
const router = useRouter()
import ShopDelete from "./ShopDelete.vue"
import ShopEdit from './ShopEdit.vue';

// 获取本人所有店铺
let tableData = ref([])
const getShopByJwtResult = getShopByJwt({})
getShopByJwtResult.then((res) => {
  if (res.code === 200) {
    tableData.value = res.data
  }
})

// 去店铺商品/订单页
type Item = {
  shopId: number
}
const toCommodityVue = (shopId: number) => {
  const item: Item = { shopId: shopId };
  router.push({
    path: "/SellerOperate/Commodity",
    query: item
  })
}
const toOrderVue = (shopId: number) => {
  const item = { shopId: shopId };
  router.push({
    path: "/SellerOperate/Order",
    query: item
  })
}
const toCouponVue = (shopId: number) => {
  const item = { shopId: shopId };
  router.push({
    path: "/SellerOperate/Coupon",
    query: item
  })
}
const toEvaluateVue = (shopId: number) => {
  const item = { shopId: shopId };
  router.push({
    path: "/SellerOperate/Evaluate",
    query: item
  })
}
// 打开删除店铺页面
let shopURef = ref()
const openShopEditDialog = (shopId: number) => {
  //子组件方法
  shopURef.value.openDialog(shopId);
}

// 打开删除店铺页面
let shopDRef = ref()
const openShopDeleteDialog = (shopId: number) => {
  //子组件方法
  shopDRef.value.openDialog(shopId);
}
</script>
  
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
  